<script setup lang="ts">
import { ArticleAPI } from "@/api/ArticleAPI";
import { Formattime } from "@/logics/geshiitem";
import useItem from "@/logics/useItem";
import { useArticleStore } from "@/stores/articleStore";
import { useUserStore } from "@/stores/userStore";
import type { Title } from "@/types/Active";
import { isDark } from "@/utils/isDark";
import { ElNotification } from "element-plus";
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";

//引入路由
const router = useRouter();
//导入用户store
const useStroe = useUserStore();
//获取时间信息
const { hour, minute, second } = useItem();
//获取文章的store对象
const articleStore = useArticleStore();
//获取路由信息
const route = useRoute();
//发送获取文章详情的请求
articleStore.getArticle(route.params.id as string);
//发送获取评论请求
articleStore.getArticle_comment(route.params.id as string);
//获取文章信息
const { article, comments } = storeToRefs(articleStore);
//定义导航目录列表
const titlelist = ref<Title[]>([]);
//获取点击的导航
let daohang = ref("");
//获取导航目录
const onGetCatalog = (list: Title[]) => {
  titlelist.value = list;
};
//导航目录跳转
function Maodian(text: string) {
  //需要渲染的导航点
  daohang.value = text;
  const anchorElement = document.getElementById(text);
  /*如果对应id的锚点存在，就跳转到锚点*/
  if (anchorElement) {
    anchorElement.scrollIntoView({ behavior: "smooth", block: "center" });
  }
}
//获取点赞的元素
const target = ref();
//获取点赞数量元素
const diggcount = ref();
//文章点赞
async function Article_digg(nid: number) {
  //发送请求获取数据
  const res = await ArticleAPI.Article_digg(nid);
  if (res.code === 200) {
    ElNotification({
      title: "点赞",
      message: res.data.msg,
      type: "success",
    });
    target.value.classList.add("show");
    diggcount.value.innerHTML = res.data.count;
    let timer: number | NodeJS.Timeout | null | undefined = null;
    timer = setTimeout(() => {
      clearTimeout(timer!);
      target.value.classList.remove("show");
    }, 1000);
  } else {
    ElNotification({
      title: "点赞",
      message: res.msg,
      type: "error",
    });
  }
}
//获取收藏的元素
const collects = ref();
//获取收藏数量元素
const collectcount = ref();
//文章收藏
async function Article_collects(nid: number) {
  //发送请求获取数据
  const res = await ArticleAPI.Article_collects(nid);
  if (res.code === 200) {
    ElNotification({
      title: "收藏",
      message: res.data.msg,
      type: "success",
    });
    collects.value.classList.add("show");
    collectcount.value.innerHTML = res.data.count;
  } else if (res.code === 300) {
    ElNotification({
      title: "收藏",
      message: res.data.msg,
      type: "error",
    });
    collects.value.classList.remove("show");
    collectcount.value.innerHTML = res.data.count;
  }
}
//定义文章是否收藏的状态
const iscollect = ref(false);
//判断用户是否收藏了该文章
async function iscollect_Article() {
  const res = await ArticleAPI.iscollect_Article(route.params.id as string);
  iscollect.value = res.data;
}
iscollect_Article();
//跳转编辑页面
function Jumpedit() {
  router.push({
    path: `/backend/edit_article/${route.params.id}`,
  });
}
</script>
<template>
  <template v-if="article.status == 'success'">
    <div class="article">
      <div class="article_title">
        <h2>
          {{ article.result.title }}
          <a v-if="useStroe.userinfo.result.is_superuser" @click="Jumpedit"
            ><i class="fa fa-pencil-square-o"></i
          ></a>
        </h2>
        <p>
          <span
            >发布时间:
            <i>{{ Formattime(article.result.create_date!) }}</i></span
          >
          <span
            >作者: <i>{{ article.result.author }}</i></span
          >
          <span
            >来源: <i>{{ article.result.source }}</i></span
          >
        </p>
        <div class="teg" v-if="article.result.tag!.length != 0">
          <i title="文章标签" class="fa fa-tags" aria-hidden="true"></i>
          <i v-for="(item, index) in article.result.tag" :key="index">{{
            item
          }}</i>
        </div>
      </div>
      <!-- 文章渲染 -->
      <md-editor
        :theme="isDark ? 'dark' : 'light'"
        v-model="articleStore.article.result.content"
        preview-only
        @on-get-catalog="onGetCatalog"
      />
      <ArticleComment
        v-if="comments.status == 'success'"
        :comments="comments.result"
      />
    </div>

    <div class="right">
      <!-- 时间显示 -->
      <div class="nianxiang">
        <div class="article_actions">
          <div class="items" title="文章点赞">
            <i
              ref="target"
              @click="Article_digg(article.result.nid!)"
              class="fa fa-thumbs-up"
            ></i>
            <span ref="diggcount"> {{ article.result.digg_count }}</span>
          </div>
          <div class="items" title="文章收藏">
            <i
              ref="collects"
              :class="{ show: iscollect }"
              @click="Article_collects(article.result.nid!)"
              class="fa fa-star"
            ></i>
            <span ref="collectcount">{{ article.result.collects_count }}</span>
          </div>
          <el-backtop :right="1" :bottom="100" title="回到顶部" />
        </div>
        <ul
          class="item"
          :style="{
            backgroundImage:
              'url(' +
              (article.result.cover
                ? article.result.cover
                : article.result.baseImg) +
              ')',
          }"
        >
          <li>
            {{ hour }}
            <p>hours</p>
          </li>
          <li>:</li>
          <li>
            {{ minute }}
            <p>minutes</p>
          </li>
          <li>:</li>
          <li>
            {{ second }}
            <p>seconds</p>
          </li>
        </ul>
        <!-- 导航目录 -->
        <div class="daohang">
          <div class="mulu">导航目录</div>
          <ul class="utls">
            <li
              :style="{
                marginLeft: `${title.level * 10}px`,
              }"
              @click="Maodian(title.text)"
              v-for="title in titlelist"
              :class="{ active: daohang == title.text }"
            >
              {{ title.text }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </template>
</template>
<style scoped lang="scss">
.article {
  width: 50%;
  margin: 0 auto;
  background-color: var(--el-bg-color-overlay);
  padding: 50px;
  margin-top: 20px;
  border-radius: 20px;
  .article_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--el-bg-color);
    h2 {
      margin: 10px 0;
      a {
        color: var(--el-color-primary);
      }
    }
    p {
      font-style: 14px;
      color: var(--el-text-color-primary);
      span {
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .teg {
      margin: 10px 0;
      i {
        font-size: 14px;
        margin-right: 5px;
        color: #ff9800;
        &:first-child {
          color: var(--el-text-color-primary);
        }
      }
    }
  }
}

.right {
  width: 15%;
  margin-right: 3%;
  margin-top: 20px;
  .nianxiang {
    position: sticky;
    top: 10%;
    .article_actions {
      position: absolute;
      top: 25%;
      left: -23%;
      .items {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--el-bg-color);
        margin-bottom: 20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        i {
          font-size: 23px;
          cursor: pointer;
          color: var(--el-text-color-primary);
          z-index: 2001;
        }
        i.show {
          color: #ff9800;
        }
      }
    }
    .item {
      height: 130px;
      font-size: 40px;
      color: var(--el-bg-color);
      display: flex;
      justify-content: space-around;

      background-size: cover;
      border-radius: 10px;
      li {
        margin-top: 20px;
        p {
          font-size: 12px;
          padding-top: 20px;
          text-align: center;
        }
      }
    }
    .daohang {
      border-radius: 10px;
      margin-top: 30px;
      width: 100%;
      background-color: var(--el-bg-color-overlay);
      .mulu {
        margin: 10px;
        padding-top: 10px;
        font-size: 18px;
      }
      .utls {
        // padding-left: 10px;
        li {
          padding-left: 10px;
          margin-top: 10px;
          font-weight: 300;
          border-radius: 5px;
          cursor: pointer;
        }
        li:hover {
          color: #409eff;
          background-color: var(--el-border-color-extra-light);
        }
        .active {
          color: var(--el-color-primary);
        }
      }
    }
  }
}
</style>
